<template>
	<view>
		<!-- 顶部自定义导航 -->
		<tn-nav-bar :isBack="type === 'choose'?true:false">我的订单</tn-nav-bar>

		<view :style="{marginTop:vuex_custom_bar_height + 'px',height:windowHeight + 'px'}">
			<!-- 1. 头部的搜索 -->
			<div style='display: flex;width: 100%;justify-content:space-between;align-items: center;'>
				<div style="width: 100%;">
					<!-- 1.搜索栏 -->
					<van-search :style="{'margin-top': vuex_custom_bar_height + 'px'}" :value="searchKey"
						placeholder="输入运单号进行搜索" @search="searchManager" @change="searchChangeManager">
					</van-search>
				</div>

				<!-- 待支付 -->
				<van-icon style="font-size: 50px;" name="https://iexpress-chire.oss-cn-beijing.aliyuncs.com/daizhifu.png" />
			</div>


			<view style="width: 100%;" :style="{height:scrollViewHeight + 'px'}" >
				<van-tabs swipeable :active="tabActive" @change="tabsActionEventManager">
					<scroll-view  :style="{height:scrollViewHeight - 60 + 'px'}" refresher-enabled="true" scroll-y="true"
						show-scrollbar="true" lower-threshold="200" enable-back-to-top="true"
						:refresher-triggered="refreshtriggered" @refresherrefresh="refresherrefreshManager"
						@refresherrestore="refresherrestoreManager" @scrolltolower="scrolltolowerManager">
				
						<van-tab v-for="item in tabList" :key="item" :title="item" :name="item">
							<template v-if="hasLogin">
								
										
							</template>
							<template v-else>
								<van-empty description="当前未登录,请先登录">
									<van-button round type="danger" class="bottom-button"
										@click="loginManager">登录</van-button>
								</van-empty>
							</template>
										
										
						</van-tab>
										
					</scroll-view>
				</van-tabs>
				
			</view>
		</view>

		<!-- 自动登录模块 -->
	</view>
</template>

<script>

	import {
		memberHasLoginManager
	} from '@/api/login.js'
	export default {
		name: 'FIND',
		components: {
	
		},

		data() {
			return {
				type: 'normal',
				// 1. 判断是否登录 
				hasLogin: false,

				windowHeight: 0,
				scrollViewHeight: 0,
				// 1. tabList
				// payStatus;
				tabList: ['全部', '待取件', '运输中', '已签收', '已取消'],
				tabActive: '已签收',

				// tableList;
				allList: [], // 全部
				daiqujianList: [], // 待取件
				yunshuzhongList: [], // 运输中
				yiwanchengList: [], // 已签收
				yiquxiaoList: [], // 已取消

				// 1.搜索key
				searchKey: '',

				// 搜索参数
				queryInfo: {
					pageNum: 1,
					pageSize: 10,
					deliveryId: '', // 运单号
					status: '',
				},
				refreshStatus: false, // 是否下拉过程
				refreshtriggered: true, // 复位状态 && 下拉状态

			}
		},

		onLoad(item) {
		

			console.log('页面加载')

		},
		onShow() {
			console.log('页面显示')
		},
		onReady() {
			console.log('页面初次显示')
			var windowHeight = uni.getSystemInfoSync().windowHeight;
			var safeArea = uni.getSystemInfoSync().safeArea.bottom - uni.getSystemInfoSync().safeArea.height;
			var vuex_custom_bar_height = this.vuex_custom_bar_height;
			var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.windowHeight = windowHeight - vuex_custom_bar_height - safeArea - statusBarHeight;
			this.scrollViewHeight = this.windowHeight - 54;
		},
		onHide() {
			console.log('页面隐藏')
		},
		onUnload() {
			console.log('页面卸载')
		},
		onBackPress() {
			console.log('页面返回...')
		},
		onShareAppMessage() {
			console.log('分享!')
		},
		onReachBottom() {
			console.log('下拉加载...')
		},
		onPageScroll() {
			console.log('页面滚动...')
		},
		onPullDownRefresh() {

		},

		methods: {
			// 登录成功方法
			loginSuccessManager() {
				this.hasLogin = true;
			},

			// tab点击事件
			tabsActionEventManager(event) {
				console.log(event);

				this.tabActive = event.detail.title;
			
			},

			// 前往登录方法
			loginManager() {
				this.$emit('actionEventManager', 'login');
			},

		searchChangeManager(item){
			
		},

		
			// 下拉状态信息  自定义下拉刷新被触发	
			refresherrefreshManager() {
			
			},
			// 3.自定义下拉刷新被复位
			refresherrestoreManager() {
			
			},

			// 上啦
			scrolltolowerManager() {
			

			},



			// 1. 返回到全部页，并刷新
			reloadAll() {
			
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 1. 主视图
	.content {
		height: 100%;
		background-color: red;
	}

	.bottom-button {
		width: 320rpx;
		height: 80rpx;
	}
</style>